<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2023/9/25
  Time: 10:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
    <style>
        html,body,#app{
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }
        .login_container {
            background-size: cover;
            background: url("/images/img.png");
            height: 100%;
        }
        .login_box {
            width: 450px;
            height: 300px;
            background: #fff;
            border-radius: 3px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .login_box>.avatar_box {
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }
        .login_box>.avatar_box>img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
        .login_form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .btns {
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login_container">
        <!-- 登录盒子  -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="/images/head.png" alt="">
            </div>
            <!-- 登录表单 -->
            <el-form :model="loginForm"  label-width="0px" class="login_form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" ></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            loginForm:{},
        },
        methods:{
            login(){
                axios.post("/login",this.loginForm).then(function(resp){
                    if(resp.data.code===200){
                        //弹出消息
                        app.$message.success(resp.data.msg);
                        //跳转页面
                        location.href="/view/index";
                    }
                    else {
                        //弹出消息
                        app.$message.error(resp.data.msg);
                    }
                })
            }
        }
    })
</script>

</html>